<template>

<el-container class="home">
  <el-header class="header ub main-justify cross-center">
  <div class="header-left-text">管理系统</div>
  <div class="ub main-center cross-center">
    <div>
    <el-dropdown placement="bottom-start">
    <img class="user-img" src="../assets/images/i1.jpg" alt="用户头像"/>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </div>
    <div class="user-role">
    <div class="header-wellcome">欢迎您</div>
    <div class="header-time">{{homeDate}}</div>
    </div>
  </div>
  </el-header>
<el-container>
  <el-aside width="auto">
    <menu-bar></menu-bar>
  </el-aside>
<el-container>
<el-main style="padding: 0px;">
  <i class="arrow-icon" :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']
  " @click="arrowBtn"></i>
  <tabs></tabs>
  <router-view></router-view>
</el-main>
  <el-footer style="background-color: gainsboro;" class="ub cross-center" >COPYRIGHT © kami</el-footer>
</el-container>
  
</el-container>
  <!-- <el-container>
    <el-aside width="200px" style="background-color:azure;">Aside</el-aside>
    <el-container>
      <el-main style="background-color: beige;">Main</el-main>
      <el-footer style="background-color: chocolate;">Footer</el-footer>
    </el-container>
  </el-container> -->
  
</el-container>

</template>

<script>
// @ is an alias to /src

import MenuBar from '../components/MenuBar.vue'
import tabs from '../components/tabs.vue'
var $vueIndex;
import {mapState} from 'vuex'

export default {
  
  computed: {
    ...mapState({
isCollapse:(state)=>state.MenuStore.isCollapse,
}),
},
  mounted() {
  $vueIndex=this;
  this.showTime();
  setInterval(function(){
    $vueIndex.showTime();
  },1000);
},
 data() {
   return {
    homeDate: ""
   }
 },
  name: 'Home',
  components: {
   MenuBar,
   tabs
  },
  methods: {
    arrowBtn(){
  console.log("点击了我");
  this.$store.commit('setOpenOrClose');
  },
    showTime(){
var week=new Array(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
);
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;

var day=date.getDate();
var hour=date.getHours();
var minutes=date.getMinutes();
var second=date.getSeconds();
this.homeDate=year+"."+(month<10?"0"+month:month)+"."+day+"    "+""+hour
+":"+minutes+":"+(second<10?"0"+second:second)+"    "+(week[date.getDay()]
||"");
}
  },
}
</script>
<style scoped>
.home{
  height: 100%;
}
.header{
    background-color: cornflowerblue;
    color: black;
    padding: 0 20px;
  }
  .header-left-text{
    font-size: 22px;
  }
  .user-img{
    height: 45px;
    width: 45px;
    border-radius: 50%;
    cursor: pointer;
  }
  .header-wellcome{
    font-size: 15px;
    font-weight: bolder;
  }
  .header-time{
    margin-top: 2px;
    font-size: 14px;
  }
  .user-role{
    margin-left: 10px;
  }
  .header-right{
    margin-right: 30px;
  }
  .el-container /deep/ .el-menu{
    border-right: none !important;
  }
  .el-aside{
    border-right: 1px solid #e6e6e6;
  }
  .menu-bar:not(.el-menu-collapse){
    width: 200px;
    min-height: 400px;
  }
  .arrow-icon{
    float: left;
    background: #eaedf1;
    border:1px solid transparent;
    font-size: 23px;
    height: 39px;
    line-height: 39px !important;
    width: 40px;
    text-align: center;
    
}
.el-container /deep/ .el-tabs__header{
  position: static !important;
}

</style>